<template>
    <a-layout class="h-screen">
        <a-layout-sider class="sider">
            <!-- <span class="bg-light-900">侧边栏</span> -->
             <h1 class="h">新闻舆情监控系统</h1>
             <a-menu 
                @click="sidemenuClick" 
                class="sidermenu"
                :selectedKeys="defaultselectsider"
                v-if="headerindex == 1">
                <a-menu-item key="homepage">
                    系统首页
                </a-menu-item>
                <a-menu-item key="frameworkindex">
                    组织架构
                </a-menu-item>
                <a-menu-item key="b">
                    权限
                </a-menu-item>
                <a-menu-item key="c">
                    工具
                </a-menu-item>
                <a-menu-item key="d">
                    运营
                </a-menu-item>
                <a-menu-item key="e2">
                    开发
                </a-menu-item>
             </a-menu>
             <a-menu 
                @click="sidemenuClick" 
                class="sidermenu"
                v-if="headerindex == 2"
                :selectedKeys="defaultselectsider">
                <a-menu-item key="business">
                    业务首页
                </a-menu-item>
                <a-menu-item key="organization">
                    工作流程
                </a-menu-item>
                <a-menu-item key="b">
                    在线办公
                </a-menu-item>
                <a-menu-item key="c">
                    流程监控
                </a-menu-item>
             </a-menu>
             <a-menu 
                @click="sidemenuClick" 
                class="sidermenu"
                v-if="headerindex == 3"
                :selectedKeys="defaultselectsider">
                <a-menu-item key="formplugin">
                    表单插件
                </a-menu-item>
                <a-menu-item key="second">
                    大屏插件
                </a-menu-item>
                <a-menu-item key="b">
                    报表插件
                </a-menu-item>
             </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header class="header">
                <a-menu 
                @click="headermenuClick" 
                mode="horizontal"
                class="headermenu"
                :selectedKeys="defaultselectheader">
                <a-menu-item key="1" style="color: white;">
                    开源版功能
                </a-menu-item>
                <a-menu-item key="2" style="color: white;">
                    企业版功能
                </a-menu-item>
                <a-menu-item key="3" style="color: white;">
                    插件市场
                </a-menu-item>
             </a-menu>
            </a-layout-header>
            <a-layout-content class="main">
                <router-view></router-view>
            </a-layout-content>
        </a-layout>

    </a-layout>
</template>

  <script setup lang="ts">
    import { ref } from 'vue'
    import { useRouter } from 'vue-router'
    const router= useRouter()
    const headerindex = ref('1')
    const defaultselectsider = ref(
        ['homepage']
    )
    const defaultselectheader = ref(
        ['1']
    )

    const sidemenuClick = (obj) =>{
        router.push(obj.key)
        defaultselectsider.value = [obj.key]
    }

    const headermenuClick = (obj) =>{
        switch(obj.key){
            case '1':
                headerindex.value = 1
                defaultselectsider.value = ['homepage']
                defaultselectheader.value = [obj.key]
                router.push('homepage')
                break
            case '2':
                headerindex.value = 2
                defaultselectsider.value = ['business']
                defaultselectheader.value = [obj.key]
                router.push('business')
                break
            case '3':
                headerindex.value = 3
                defaultselectsider.value = ['formplugin']
                defaultselectheader.value = [obj.key]
                router.push('formplugin')
                break
            default:
                headerindex.value = 1
                defaultselectsider.value = ['homepage']
                router.push('homepage')
                break
        }
    }
  </script>
  
  <style scoped>
    .sider {
        background-color: rgb(0,21,41);
        color: #333;
        /* text-align: center; */
    }
    .sider .h{
        color: white;
        font-size: 20px;
        padding: 20px 0;
        text-align: center;
    }
    .sidermenu{
        color: white;
        background-color:rgb(0, 21, 41);
    }
    /* 鼠标悬浮时的样式 */
    .sidermenu :hover{ 
        color: rgb(22, 119, 255) !important;
    }
    .header{
        background-color: rgb(22, 119, 255);
    }
    .headermenu{
        color: white;
        background-color:rgb(22, 119, 255);
    }
    .headermenu :hover{
        color: white !important;
        background-color: rgb(9,88,217) !important;
    }
    .main {
        background-color: rgb(245, 245, 245);
        color: #333;
        text-align: center;
    }
  </style>
  